<template>
  <el-menu
    :default-active="$route.path"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <!-- 一级菜单 -->
    <template v-for="item in menu">
      <el-submenu
        v-if="item.children && item.children.length"
        :index="item.path"
        :key="item.path"
      >
        <template #title
          ><i :class="item.icon"></i><span>{{ item.name }}</span></template
        >

        <!-- 二级菜单 -->
        <template v-for="itemChild in item.children">
          <el-submenu
            v-if="itemChild.children && itemChild.children.length"
            :index="itemChild.path"
            :key="itemChild.path"
          >
            <template #title
              ><i :class="itemChild.icon"></i
              ><span>{{ itemChild.name }}</span></template
            >
            <!-- 三级菜单 -->
            <el-menu-item
              v-for="itemChild_Child in itemChild.children"
              :index="itemChild_Child.path"
              :key="itemChild_Child.path"
            >
              <i :class="itemChild_Child.icon"></i
              ><span>{{ itemChild_Child.name }}</span></el-menu-item
            >
          </el-submenu>

          <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"
            ><i :class="itemChild.icon"></i
            ><span>{{ itemChild.name }}</span></el-menu-item
          >
        </template>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.path"
        ><i :class="item.icon"></i><span>{{ item.name }}</span></el-menu-item
      >
    </template>
  </el-menu>
</template>

<script>
import { getUserInfo } from "@/api/index.js";
export default {
  name: "Nav",
  data() {
    return {
      isCollapse: false,
      menu: null,
    };
  },
  mounted() {
    this.userinfo();
  },
  methods: {
    userinfo() {
      var that = this;
      getUserInfo()
        .then(function (res) {
          if (res.code == 1) {
            that.menu = JSON.parse(sessionStorage.getItem("userinfo")).menu;
            // 缓存用户信息
            // sessionStorage.setItem("username", 11111111);
          }
        })
        .catch(function (error) {});
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  text-align: left;
}

.el-menu {
  overflow: hidden;
  height: 100%;
  text-align: left;
}
</style>
